<template>
  <div>
    <div class="main">
      <el-button type="primary" size="medium" @click="dialog_add = true"
        >上传新附件<i class="el-icon-upload el-icon--right"></i
      ></el-button>
      <el-table :data="allData" style="width: 100%">
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column label="附件名称" min-width="200">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>附件名称: {{ scope.row.fileDisplayName }}</p>
              <div slot="reference" class="name-wrapper">
                <span size="medium">{{ scope.row.fileDisplayName }}</span>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="日期" prop="createTime" width="180">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="附件上传" :visible.sync="dialog_add" width="30%">
        <el-form ref="form" label-width="80px">
          <el-form-item label="附件名称">
            <el-input type="text" v-model="fName"></el-input>
          </el-form-item>
          <el-form-item label="选择文件">
            <el-upload
              class="upload-demo upload_demo"
              ref="upload_zzcl"
              action="https://jsonplaceholder.typicode.com/posts/"
              :accept="accept"
              :http-request="uploadFiles"
              :show-file-list="false"
            >
              <el-button size="small" type="primary">上传附件</el-button>
              <div slot="tip" class="el-upload__tip">上传文件不超过10mb</div>
            </el-upload>
          </el-form-item>
        </el-form>
      </el-dialog>
      <el-dialog
        title="修改附件名称"
        :before-close="handleClose"
        :visible.sync="dialog_updata"
        width="30%"
      >
        <el-form ref="form" :model="updataFrom" label-width="80px">
          <el-form-item label="附件名称">
            <el-input
              type="text"
              v-model="updataFrom.fileDisplayName"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button size="small" type="primary" @click="updataSubmit"
              >修改</el-button
            >
            <el-button size="small" @click="handleCancle">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { getAllLine, updateLine, updatefileName, removeLine } from "@/api/apis";
export default {
  components: {},
  name: "index",
  data() {
    return {
      allData: [],
      dialog_add: false,
      dialog_updata: false,
      updataFrom: {},
      fName: "",
      fileList: [],
      accept:
        "application/msexcel,text/plain,application/msword,application/pdf,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.openxmlformats-officedocument.wordprocessingml.document,image/jpg,image/jpeg,image/png,image/PNG",
    };
  },

  created() {
    this.getList();
  },
  methods: {
    handleCancle() {
      this.getList();
      this.dialog_updata = false;
    },
    handleClose(done) {
      done();
      this.getList();
    },
    updataSubmit() {
      updatefileName(this.updataFrom).then((res) => {
        // console.log("d", res);
        this.getList();
        this.dialog_updata = false;
        if (res.code === 20000) {
          this.$message({
            type: "success",
            message: "修改成功!",
          });
        }
      });
    },
    handleEdit(index, row) {
      // console.log(index, row);
      this.dialog_updata = true;
      this.updataFrom = row;
    },
    uploadFiles(e) {
      if (this.fName == "") {
        this.$message({
          type: "error",
          message: "请输入名称!",
        });
        return;
      }
      var reads = new FileReader();
      var f = e.file;
      let form = new FormData();
      form.append("file", f, f.name);
      form.append("fileName", f.name);
      reads.readAsDataURL(f);
      reads.onload = () => {
        let file = form;
        updateLine(file, this.fName).then((res) => {
          if (res.code === 20000) {
            this.$message({
              type: "success",
              message: "上传成功!",
            });
            this.getList();
            this.dialog_add = false;
          } else {
            this.$message({
              type: "error",
              message: "上传失败!",
            });
          }
        });
      };
    },

    handleDelete(row) {
      console.log(row.id);
      this.$confirm("确定删除？")
        .then((_) => {
          removeLine(row.id).then((res) => {
            console.log(res);
            if (res.code === 20000) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getList();
            } else {
              this.$message({
                type: "error",
                message: "删除失败!",
              });
            }
          });
        })
        .catch((_) => {});
    },
    //获取列表
    getList() {
      getAllLine().then((res) => {
        this.allData = res.data;
        // console.log("all", this.allData);
      });
    },
  },
};
</script>
<style lang="less" scoped>
.success {
  color: #67c23a;
  font-size: 13px;
}
.error {
  color: #e6a23c;
  font-size: 13px;
}

.delete {
  color: #e6643c;
  font-size: 13px;
}
.main {
  width: 100%;
  height: calc(100vh - 120px);
  overflow-y: auto;
  // background-color: #efefef;
}
</style>
